<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		
	</head>
	<body style="margin:10px;border:1px solid blue; background-color: #fff;">
		<div id="mycanvas" style="border:1px solid red;margin:10px;"></div>
		<canvas id="textureCanvas"></canvas>
		<div id="eventposition"></div>

		<img id="dataimg" />
	</body>
	<script type="module">	
		import jmGraph from "../../index.js";

		const textureCanvas = document.getElementById('textureCanvas');
		var g = jmGraph.create('mycanvas', {
			width: window.innerWidth * 0.8,
			height: window.innerHeight * 0.8,
			mode: 'webgl',
			textureCanvas
		});

		init(g);

		function update() {
			if(g.needUpdate) g.redraw();
			requestAnimationFrame(update);
		}

		update();
		
			
		function init(graph){
			graph.style.fill = '#fff';
			var style = {
				stroke:'#D07814FF',
				lineWidth: 3,
				close:true
			};
			style.shadow = '0,0,5,#fff';
			style.opacity = 1;
			//graph.createShadow('shadow(0,0,10,#000)');//new jmShadow('shadow(10,10,20,#000)');
			//style.shadow = graph.createShadow(4,4,6,'#000000');
			//style.lineCap = 'round';

			var line = graph.createLine({x:10,y:200},{x:80,y:120},style);
			
			line.bind('mouseover',function(evt) {
				this.style.stroke = 'rgba(39,72,188,1)';
				this.cursor = 'pointer';
				this.needUpdate = true;
			});
			line.bind('mouseleave',function(evt) {
				this.style.stroke = 'rgb(120,20,80)';
				this.cursor = 'default';
				this.needUpdate = true;
			});
			line.bind('touchstart',function(evt) {
				console.log('touchstart',evt);
			});
			line.bind('touchmove',function(evt) {
				console.log('touchmove',evt);
			});
			line.bind('touchend',function(evt) {
				console.log('touchend',evt);
			});
			
			graph.children.add(line);
			line.canMove(true);
			

			style = graph.utils.clone(style);
			delete style['rotation'];
			
			style.lineType = "dotted";
			style.dashLength = 10;
			style.lineWidth = 2;
			var line = graph.createLine({x:50,y:50},{x:200,y:400}, style);
			style.zIndex = 20;
			graph.children.add(line);
			line.bind('mouseover',function(evt) {
				this.style.stroke = 'rgba(39,72,188,1)';
				//graph.canvas.style.cursor = 'pointer';
				this.needUpdate = true;
			});
			line.bind('mouseleave',function(evt) {
				this.style.stroke = 'rgb(120,20,80)';
				//graph.canvas.style.cursor = 'default';
				this.needUpdate = true;
			});
			line.canMove(true);
			


			style = graph.utils.clone(style);	
			//style.opacity = .8;
			var bg = graph.createRadialGradient('50%','50%', 0,'50%','50%', 40);
			bg.addStop(0,'rgba(0,0,0, 0.1)');
			bg.addStop(0.5,'rgba(0,255,0,5)');
			bg.addStop(1,'rgba(150,200,180,0.8)');
			style.fill = bg;//'linear-gradient(0 0 0 100,#000 0,#73998A 1)';
			style.close = true;
			var rect = 	graph.createPath(null,style, {
				isRegular: true
			});
			rect.points.push({x:20,y:20});
			rect.points.push({x:20,y:100});
			rect.points.push({x:100,y:100});
			rect.points.push({x:100,y:20});
			graph.children.add(rect);

			style = graph.utils.clone(style);
			var img = new Image();
			img.onload = ()=>{
				//style.fillImage = img;
				//style.fill = 'rgba(220,100,80, 0.5)';
				style.lineWidth = 1.2;
				//delete style.fill;
				//style.close = true;

				for(let i=0; i< 1000; i++) {
					var path = graph.createPath(null,style, {
						isRegular: true,
						needCut: false
					});
					const startx = Math.random() * window.innerWidth;
					const starty = Math.random() * window.innerHeight;
					if(i === 0) {
						path.points = [{x:600, y:370}, {x:700,  y:600}, {x:780,  y:420}, {x:730,  y:570}, {x:590,  y:520}];
					}
					else {
						path.points.push({x:startx+200,y:60+starty});
						path.points.push({x:startx+400,y:60+starty});

						path.points.push({x:startx+220,y:120+starty});
						path.points.push({x:startx+260,y:300+starty});		

						path.points.push({x:startx+420,y:100+starty});

						path.points.push({x:startx+260,y:20+starty});	
						path.points.push({x:startx+250,y:80+starty});
						path.points.push({x:startx+200,y:10+starty});
					}
					/*path.points.push({x:300,y:60});
					path.points.push({x:400,y:60});

					path.points.push({x:360,y:130});
					//path.points.push({x:320,y:120});

					path.points.push({x:420,y:100});

					path.points.push({x:260,y:60});*/
					
					
					//rect.children.add(path);

					graph.children.add(path);
					
					//line.canMove(true);
					path.canMove(true);	
				}
			}
			img.src = '../x.png';	
			
			rect.canMove(true);
		}
			
		
	</script>
</html>